<template>
  <div id="qcode-box" >
      <div class="q-login">
         <div class="title">扫一扫登录</div>
         <div class="success-login" v-if="sessionStatus==2">
                √&nbsp;登录成功，{{username}}
         </div>  
         <div class="qcode-img" v-else>
              <template v-if="sessionStatus==-1">
                  <div class="qr-expire" @click="resetRefresh()">
                     二维码过期,重新刷新
                  </div> 
              </template>
              <template v-else>
                <img :src="base64Code"/>
                <div  v-if="sessionStatus==1" class="qcode-tips">手机已扫描,等待确认</div>
              </template>  
             
         </div>
         <div class="qcode-desc">无需关注 立刻登录</div>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
let sseObj;

export default {
  name: 'QCode',
  data () {
    return {
      requestIp:'http://localhost',
      base64Code: '',
      sessionId:'',
      sessionStatus:0,
      username:''
    }
  },
  mounted(){
    this.loadQrCode();
  },
  methods:{
    //加载
    loadQrCode(){
        axios.get(this.requestIp+'/user/pcQrCode').then((response)=>{
            let {data}=response.data;
            this.base64Code=data.base64Code;
            this.sessionId=data.sessionId;
            this.startQrCodeListener();
        })
    },
    //开启sse长连接
    startQrCodeListener(){
        //发送Http长连接
        sseObj=new EventSource(this.requestIp+"/user/getSessionStatus?sessionId="+this.sessionId);
        //回调方法
        sseObj.onmessage=(evt)=>{
             let resultJson=JSON.parse(evt.data);
            //session状态
            this.sessionStatus=resultJson.data.status;
            //等于-1表示sessionId过期
            if(this.sessionStatus==-1){
              sseObj.close();
              return;
            }else if(this.sessionStatus==2){
                this.username=resultJson.data.username;
                 sseObj.close();
            }
            console.log(evt.data);
        }

        sseObj.error=(evt)=>{
            sseObj.close();
        }
    },
    //重新刷新二维码
    resetRefresh(){
       sseObj.close();
       this.loadQrCode();
    },
  }

}
</script>

<style scoped>
  #qcode-box{
    width: 100vw;
    height: 100vh;
  }
 .q-login{
   background: #ebecef;
   width: 500px;
   height: 300px;
   margin: 0 auto;
   border-radius: 8px 8px;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
 }
 .q-login >.title{
   line-height: 40px;
   font-size: 16px;
   font-weight: 600;
   color: #222226;
   text-align: center;
 }

  .q-login > .qcode-img{
    text-align: center;
    padding-top: 10px;
    position: relative;
  }
  .q-login > .qcode-img > img{
    width: 200px;
    height: 200px;
  }
  .q-login >.qcode-desc{
     text-align: center;
     font-size: 13px;
     color: #222226;
     margin-top: 10px;
  }
  .qr-expire{
    width: 200px;
    line-height: 200px;
    background: #000;
    margin: 0 auto;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    flex: 1;
  }
  .qcode-tips{
    width: 200px;
    line-height: 30px;
    position: absolute;
    background: #000;
    color: #fff;
    bottom: 0px;
    text-align: center;
    font-size: 13px;
    left: 50%;
    transform: translateX(-50%);

  }

  .success-login{
    line-height: 200px;
    background: #fff;
    color: #046590;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
  }
</style>
